<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格优化效果测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-title {
            color: #409eff;
            border-bottom: 2px solid #409eff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .comparison-table th,
        .comparison-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .comparison-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .old-value {
            color: #f56c6c;
            text-decoration: line-through;
        }
        .new-value {
            color: #67c23a;
            font-weight: bold;
        }
        .demo-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 14px;
        }
        .demo-table th,
        .demo-table td {
            border: 1px solid #ebeef5;
            padding: 12px 8px;
            text-align: center;
        }
        .demo-table th {
            background-color: #f5f7fa;
            color: #606266;
            font-weight: 600;
        }
        .demo-table tr:hover {
            background-color: #f5f7fa;
        }
        .text-overflow {
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: help;
        }
        .text-overflow:hover {
            overflow: visible;
            white-space: normal;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 1000;
            position: relative;
        }
        .tooltip-demo {
            position: relative;
            display: inline-block;
        }
        .tooltip-content {
            visibility: hidden;
            width: 300px;
            background-color: #303133;
            color: #fff;
            text-align: left;
            border-radius: 4px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -150px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            line-height: 1.4;
        }
        .tooltip-content::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #303133 transparent transparent transparent;
        }
        .tooltip-demo:hover .tooltip-content {
            visibility: visible;
            opacity: 1;
        }
        .width-demo {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        .width-item {
            flex: 1;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
            text-align: center;
        }
        .width-150 { width: 150px; }
        .width-180 { width: 180px; }
        .width-200 { width: 200px; }
        .tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background-color: #409eff;
            color: white;
        }
    </style>
</head>
<body>
    <h1>表格优化效果测试页面</h1>
    
    <div class="test-container">
        <h2 class="test-title">列宽优化对比</h2>
        
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>表格</th>
                    <th>字段</th>
                    <th>修改前宽度</th>
                    <th>修改后宽度</th>
                    <th>优化说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="3">操作记录</td>
                    <td>操作仓库</td>
                    <td class="old-value">150px</td>
                    <td class="new-value">200px</td>
                    <td>增加50px，避免仓库名称换行</td>
                </tr>
                <tr>
                    <td>操作描述</td>
                    <td>min-width: 200px</td>
                    <td class="new-value">min-width: 200px + tooltip</td>
                    <td>添加省略号提示</td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>min-width: 150px</td>
                    <td class="new-value">min-width: 150px + tooltip</td>
                    <td>添加省略号提示</td>
                </tr>
                <tr>
                    <td rowspan="3">移库记录</td>
                    <td>源库房</td>
                    <td class="old-value">150px</td>
                    <td class="new-value">180px</td>
                    <td>增加30px，避免仓库名称换行</td>
                </tr>
                <tr>
                    <td>目标库房</td>
                    <td class="old-value">150px</td>
                    <td class="new-value">180px</td>
                    <td>增加30px，避免仓库名称换行</td>
                </tr>
                <tr>
                    <td>移库原因</td>
                    <td>min-width: 200px</td>
                    <td class="new-value">min-width: 200px + tooltip</td>
                    <td>添加省略号提示</td>
                </tr>
                <tr>
                    <td rowspan="2">定位日志</td>
                    <td>设备名称</td>
                    <td class="old-value">150px</td>
                    <td class="new-value">180px</td>
                    <td>增加30px，避免设备名称换行</td>
                </tr>
                <tr>
                    <td>位置描述</td>
                    <td>min-width: 200px</td>
                    <td class="new-value">min-width: 200px + tooltip</td>
                    <td>添加省略号提示</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">列宽效果演示</h2>
        
        <h3>仓库名称在不同宽度下的显示效果：</h3>
        <div class="width-demo">
            <div class="width-item">
                <h4>150px (修改前)</h4>
                <div class="width-150" style="border: 1px solid #ddd; padding: 8px; overflow: hidden;">
                    华东中央库房管理中心
                </div>
                <p style="color: #f56c6c; font-size: 12px;">可能出现换行</p>
            </div>
            <div class="width-item">
                <h4>180px</h4>
                <div class="width-180" style="border: 1px solid #ddd; padding: 8px; overflow: hidden;">
                    华东中央库房管理中心
                </div>
                <p style="color: #67c23a; font-size: 12px;">显示完整</p>
            </div>
            <div class="width-item">
                <h4>200px (修改后)</h4>
                <div class="width-200" style="border: 1px solid #ddd; padding: 8px; overflow: hidden;">
                    华东中央库房管理中心
                </div>
                <p style="color: #67c23a; font-size: 12px;">显示完整，有余量</p>
            </div>
        </div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">省略号提示效果演示</h2>
        
        <table class="demo-table">
            <thead>
                <tr>
                    <th style="width: 120px;">操作类型</th>
                    <th style="width: 200px;">操作仓库</th>
                    <th style="width: 250px;">操作描述</th>
                    <th style="width: 150px;">备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span class="tag">新增</span></td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">华东中央库房管理中心第一分库</div>
                            <div class="tooltip-content">华东中央库房管理中心第一分库</div>
                        </div>
                    </td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">器具新增操作，初始化器具基本信息，设置初始状态为正常</div>
                            <div class="tooltip-content">器具新增操作，初始化器具基本信息，设置初始状态为正常</div>
                        </div>
                    </td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">系统自动新增，批次号：20240115001</div>
                            <div class="tooltip-content">系统自动新增，批次号：20240115001</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><span class="tag">定位器绑定</span></td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">华南物流配送中心</div>
                            <div class="tooltip-content">华南物流配送中心</div>
                        </div>
                    </td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">为器具绑定GPS定位器设备LOC001，启用实时位置追踪功能</div>
                            <div class="tooltip-content">为器具绑定GPS定位器设备LOC001，启用实时位置追踪功能</div>
                        </div>
                    </td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">设备绑定成功</div>
                            <div class="tooltip-content">设备绑定成功</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><span class="tag">装箱</span></td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">华北区域配送中心</div>
                            <div class="tooltip-content">华北区域配送中心</div>
                        </div>
                    </td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">器具装箱操作，装载电子元件产品，总重量15.6kg，体积0.8立方米</div>
                            <div class="tooltip-content">器具装箱操作，装载电子元件产品，总重量15.6kg，体积0.8立方米</div>
                        </div>
                    </td>
                    <td>
                        <div class="tooltip-demo">
                            <div class="text-overflow">满箱装载，质检合格</div>
                            <div class="tooltip-content">满箱装载，质检合格</div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <p style="color: #909399; font-size: 14px;">
            <strong>提示：</strong>鼠标悬浮在被截断的文本上可以查看完整内容
        </p>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">Element UI show-overflow-tooltip 属性说明</h2>
        
        <h3>功能特性：</h3>
        <ul>
            <li><strong>自动检测</strong>：当内容超出列宽时自动显示省略号</li>
            <li><strong>悬浮提示</strong>：鼠标悬浮时显示完整内容的 tooltip</li>
            <li><strong>性能优化</strong>：只有在内容超出时才显示 tooltip</li>
            <li><strong>样式统一</strong>：使用 Element UI 统一的 tooltip 样式</li>
        </ul>
        
        <h3>使用方法：</h3>
        <div style="background: #f4f4f4; padding: 15px; border-radius: 4px; font-family: monospace;">
&lt;!-- 基本用法 --&gt;<br>
&lt;el-table-column prop="content" label="内容" show-overflow-tooltip /&gt;<br><br>
&lt;!-- 结合模板使用 --&gt;<br>
&lt;el-table-column label="仓库名称" show-overflow-tooltip&gt;<br>
&nbsp;&nbsp;&lt;template slot-scope="scope"&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.warehouse ? scope.row.warehouse.warehouseName : '-' }}<br>
&nbsp;&nbsp;&lt;/template&gt;<br>
&lt;/el-table-column&gt;
        </div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">测试验证步骤</h2>
        
        <ol>
            <li><strong>打开器具详情</strong>：
                <ul>
                    <li>在器具管理页面点击"详情"按钮</li>
                    <li>抽屉从右侧滑出</li>
                </ul>
            </li>
            <li><strong>切换到操作记录标签页</strong>：
                <ul>
                    <li>点击"操作记录"标签</li>
                    <li>检查操作仓库列宽是否为200px</li>
                    <li>验证长内容是否显示省略号</li>
                    <li>鼠标悬浮测试tooltip效果</li>
                </ul>
            </li>
            <li><strong>切换到移库记录标签页</strong>：
                <ul>
                    <li>点击"移库记录"标签</li>
                    <li>检查源库房和目标库房列宽是否为180px</li>
                    <li>验证移库原因的省略号效果</li>
                </ul>
            </li>
            <li><strong>切换到定位日志标签页</strong>：
                <ul>
                    <li>点击"定位日志"标签</li>
                    <li>检查设备名称列宽是否为180px</li>
                    <li>验证位置描述的省略号效果</li>
                </ul>
            </li>
        </ol>
    </div>

    <script>
        console.log('表格优化效果测试页面已加载')
        console.log('请按照测试步骤验证表格优化效果')
        
        // 模拟长文本内容
        const longTexts = [
            '华东中央库房管理中心第一分库',
            '器具新增操作，初始化器具基本信息，设置初始状态为正常',
            '系统自动新增，批次号：20240115001',
            '为器具绑定GPS定位器设备LOC001，启用实时位置追踪功能',
            '器具装箱操作，装载电子元件产品，总重量15.6kg，体积0.8立方米'
        ]
        
        console.log('测试用长文本内容：', longTexts)
    </script>
</body>
</html>
